<template>
    <div>
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span class="card-title">{{ title }}</span>
          <el-button
            style="float: right"
            size="mini"
            type="primary"
            @click="() => handleSave(false)"
            >保存</el-button
          >
          <el-button
            style="float: right; margin-right: 10px"
            size="mini"
            v-if="!this.id"
            @click="() => handleSave(true)"
            >保存并新增</el-button
          >
        </div>
        <div class="text item">
          <el-form
            :model="unit"
            :rules="rules"
            ref="unitForm"
            label-width="100px"
            label-position="left"
          >
            <el-form-item label="编号" prop="code">
              <el-input v-model="unit.code"></el-input>
            </el-form-item>
            <el-form-item label="名称" prop="name">
              <el-input v-model="unit.name"></el-input>
            </el-form-item>
            <el-form-item label="激活" prop="activated">
              <el-switch v-model="unit.activated"> </el-switch>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </template>
  <script>
  import { getUnit, addUnit, updateUnit } from "@/api/unit";
  export default {
    data() {
      return {
        unit: { id: "", code: "", name: "", symbol: "", activated: true },
        rules: {
          code: [{ required: true, message: "请填写编号", trigger: "blur" }],
          name: [{ required: true, message: "请填写名称", trigger: "blur" }],
        },
        title: "",
      };
    },
    methods: {
      getData() {
        if (!this.id) return;
        getUnit(this.id).then((res) => {
          this.unit = res || {};
        });
      },
      handleSave(afterAdd) {
        this.$refs.unitForm.validate((valid) => {
          if (valid) {
            this.saveData(afterAdd);
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
      saveData(afterAdd) {
        if (!this.id) {
          addUnit(this.unit).then((res) => {
            if (!res) return;
            this.$notify({
              title: "成功",
              message: "保存成功",
              type: "success",
              position: "bottom-right",
            });
            if (afterAdd) {
              this.unit = {};
            } else {
              this.$emit("refresh", res);
            }
          });
        } else {
          updateUnit(this.unit).then((res) => {
            if (!res) return;
            this.$notify({
              title: "成功",
              message: "保存成功",
              type: "success",
              position: "bottom-right",
            });
            if (afterAdd) {
              this.unit = {};
            } else {
              this.$emit("refresh", res);
            }
          });
        }
      },
    },
    mounted() {
      this.title = this.id ? "编辑" : "新增";
      this.getData();
    },
    props: {
      id: {
        type: String,
        default: "",
      },
    },
  };
  </script>
  <style scoped></style>
  